<template>
    <div class="zlxz-wrapper">
        <hg-tab class="f-l zlxz-tab" direction="vertical" :list="tabs" @change="changeTab"></hg-tab>
        <el-table v-if="activeTab === ''" class="zlxz-table" :data="tableData">
            <!-- <el-table-column align="center" type="selection" width="30"></el-table-column> -->
            <!-- <el-table-column width="30" type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="文件名称">
                            <span>{{ props.row.filename }}</span>
                        </el-form-item>
                        <el-form-item label="文件描述">
                            <span>{{ props.row.description }}</span>
                        </el-form-item>
                        <el-form-item label="文件类型">
                            <span>{{ props.row.type }}</span>
                        </el-form-item>
                        <el-form-item label="上传人">
                            <span>{{ props.row.username }}</span>
                        </el-form-item>
                        <el-form-item label="上传时间">
                            <span>{{ props.row.uploadtime }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column> -->
            <el-table-column align="left" label="文件名称" width="230">
                <template slot-scope="scope">
                    <a v-if="scope.row.type=='web'" class="link-line mark-visit text-elli" :href="`${scope.row.contentUrl}`" :title="`${scope.row.filename}`" target="_blank">{{scope.row.filename}}</a>
                    <a v-else class="link-line mark-visit text-elli" :href="`/door/uploadfiles/${scope.row.realfilename}`" :title="`${scope.row.filename}`" target="_blank">{{scope.row.filename}}</a>
                </template>
            </el-table-column>
            <el-table-column align="center" label="文件描述" minwidth="300">
                <template slot-scope="scope">
                    <a v-if="scope.row.type=='web'" class="link-line mark-visit text-elli" :href="`${scope.row.realfilename}`" target="_blank">{{scope.row.description}}</a>                    
                    <span v-else class="text-elli">{{scope.row.description}}</span>
                    <!-- <a v-else class="link-line mark-visit text-elli" target="_blank">{{scope.row.description}}</a>                                         -->
                </template>
            </el-table-column>
            <el-table-column align="center" prop="type" label="文件类型" width="100">
                <template slot-scope="scope">
                    <i :title="scope.row.type" :class="`file-icon fa fa-${getIcon(scope.row.type)}-o`"></i>
                </template>
            </el-table-column>
            
            <el-table-column align="center" prop="username" label="上传人" width="100"></el-table-column>
            <el-table-column align="center" prop="uploadtime" label="上传时间" width="100">
                <template slot-scope="scope">
                    <span>{{ dateFormat(scope.row.uploadtime) }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="80">
                <template slot-scope="scope">
                    <a v-if="scope.row.type=='web'" @click='shareUrl(scope.row.contentUrl)'><i class="fa fa-share"></i></a>
                    <a v-else class="download-btn" :href="`/door/uploadfiles/${scope.row.realfilename}`" :download="scope.row.filename"><i class="fa fa-download"></i></a>
                </template>
            </el-table-column>
        </el-table>
        <el-table v-else class="zlxz-table" :data="tableData">
            <el-table-column align="left" label="标题">
                <template slot-scope="scope">
                    <span>{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="时间" width="230">
                <template slot-scope="scope">
                    <span>{{ dateFormat(scope.row.time) }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="操作" width="80">
                <template slot-scope="scope">
                    <a href="#" @click="goToUrl(scope.row.url)">查看</a>
                </template>
            </el-table-column>
        </el-table>

        <div class="clear-float"></div>
        <div class="page-wrapper">
            <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="changeSize" @current-change="pageChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]" :total="pageTotal"></el-pagination>
            <!-- <el-button class="f-r" v-if="multipleSelection && multipleSelection.length>0" size="small" type="primary"><i class="fa fa-download"></i>下载{{multipleSelection.length}}个文件</el-button> -->
        </div>
        
        <el-dialog title="手机扫一扫分享" width="300px" :visible.sync="dialogVisible">
            <canvas ref="canvas" class="canvas"></canvas>
            <br>
            <el-button id="clipBtn" :data-clipboard-text="activeUrl">复制链接</el-button>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import hgTab from '../common/hgTab.vue'
import QRCode from 'qrcode'
import { getFileIcon, dateFormat } from '../../scripts/until'
import Clipboard from 'clipboard'

export default {
    name: 'zlxz',
    data: function() {	
        return {
            dialogVisible:false,
            activeUrl:'',
            activeTab: '',
            currentPage: 1,
            pageTotal: 10,
            // multipleSelection: null,
            tabs:[
                {
                    icon:'file-o',
                    label:'用户资料',
                    value:''
                },
                {
                    icon:'file-o',
                    label:'规划计划',
                    value:'规划计划'
                },
                {
                    icon:'file-o',
                    label:'政策法规',
                    value:'政策法规'
                },
                {
                    icon:'file-o',
                    label:'规范文件',
                    value:'规范文件'
                }
            ],
            pageSize: 10,
            getData:[],
            tableData: []
        }
    },
    components:{
        hgTab
    },
    methods: {
        dateFormat(date) {
            if(!date) {
                return '';
            }
            return dateFormat(date, 'ymd')
        },
        download(scope){
            console.log(scope)
        },
        changeTab(val) {
            this.activeTab = val;
            console.log(this.activeTab);
            this.pageChange(1);
        },
        changeSize(val) {
            this.pageSize = val;
            this.getFiles(1)
        },
        pageChange(val){
            console.log(val)
            this.getFiles(val)
        },
        getIcon(val){
            if(!val) {
                return '';
            }
            return getFileIcon(val)
        },
        // handleSelectionChange(val) {
        //     console.log(val)
        //     this.multipleSelection = val;
        // },
        getFiles(pagenum){
            if(this.activeTab == '') { // 所有文件
                this.$$http('GET_TYPE_FILE',[encodeURI(this.activeTab), this.pageSize, pagenum]).then(data1=>{
                    // console.log(data);
                    // this.pageTotal = data.total;
                    this.getData = data1.rows;
                    console.log(this.getData)
                    
                    this.$$http('GET_NEWS_LIST', ['some', this.pageSize, pagenum]).then(data=>{
                        // console.log(data);
                        // total1 = data.total;
                        var array1=data;
                        console.log(array1);
                        for(var i=0;i<array1.length;i++){
                            if(array1[i].acquisitionId==11){
                                this.getData.push({
                                    description:'水利局规划计划文件',
                                    userid:'',
                                    filename:array1[i].title,
                                    realfilename:array1[i].channelUrl,
                                    uploadtime:array1[i].jc_content_ext.releaseDate,
                                    contentUrl:array1[i].contentUrl,
                                    type:'web',
                                    size:'',
                                    lable:'规划计划'
                                })
                            }else if(array1[i].acquisitionId==12){
                                this.getData.push({
                                    description:'水利局政策法规文件',
                                    userid:'',
                                    filename:array1[i].title,
                                    realfilename:array1[i].channelUrl,
                                    uploadtime:array1[i].jc_content_ext.releaseDate,
                                    contentUrl:array1[i].contentUrl,
                                    type:'web',
                                    size:'',
                                    lable:'政策法规'
                                })
                            }else if(array1[i].acquisitionId==13){
                                this.getData.push({
                                    description:'水利局规范文件文件',
                                    userid:'',
                                    filename:array1[i].title,
                                    realfilename:array1[i].channelUrl,
                                    uploadtime:array1[i].jc_content_ext.releaseDate,
                                    contentUrl:array1[i].contentUrl,
                                    type:'web',
                                    size:'',
                                    lable:'规范文件'
                                })
                            }
                        };

                        console.log(this.getData);
                        // 将所有时间转时间戳
                        var nowData=[];
                        for(var i=0;i<this.getData.length;i++){
                            if(typeof this.getData[i].uploadtime == 'string'){
                                console.log(this.getData[i].uploadtime);
                                var stringTime = this.getData[i].uploadtime;
                                var timestamp2 = Date.parse(new Date(stringTime));
                                console.log(stringTime + "的时间戳为：" + timestamp2);
                                this.getData[i].uploadtime=timestamp2;
                            }
                            nowData.push(this.getData[i])
                        }
                        console.log(nowData);
                        console.log(this.getData);
                        this.getData=nowData.sort(function(a,b){
                            return b.uploadtime - a.uploadtime;//时间倒序
                        });
                        this.tableData=this.getData.slice((pagenum-1)*this.pageSize,(pagenum)*this.pageSize-1);
                        this.pageTotal=this.getData.length;
                    })
                    
                })
            } else if(['规划计划', '政策法规', '规范文件'].includes(this.activeTab)) {
                let typeDict = {
                    '规划计划': '801', 
                    '政策法规': '802', 
                    '规范文件': '803'
                }
                this.$$http('GET_NEWS_LIST', [typeDict[this.activeTab], this.pageSize, pagenum]).then(data => {
                    let curData = [];
                    data.rows.forEach(item => {
                        curData.push({
                            title: item.title,
                            time: item.jc_content_ext.releaseDate,
                            url: item.contentUrl
                        })
                    })
                    console.log(curData)
                    this.tableData = curData;
                    this.pageTotal = data.total;
                });
            }
        },
        goToUrl(url) {
            window.open(url);
        },
        shareUrl(url) {
            this.dialogVisible = true;
            let that = this;
            this.activeUrl = url;
            var clipboard = new Clipboard('#clipBtn'); 
            clipboard.on('success', function(e) {
                that.$message.success('已复制到剪切板，按Ctrl+V可进行粘贴')
            });
            clipboard.on('error', function(e) {
                that.$message.error('复制失败！')
            });
            setTimeout(function() {
                var canvas = that.$refs.canvas;
                QRCode.toCanvas(canvas, url, function (error) {
                    if (error) console.error(error)
                })
            }, 100);
        }
    }
}
</script>

<style lang="scss">
.zlxz-wrapper{
    // height: 600px;
    min-height: 184px;
    .zlxz-tab{
        width: 200px;
        margin: 35px 0 0 0;
    }
    // padding: 10px;
    position: relative;
    .zlxz-table{
        margin-top: 20px;
        width: 1000px;
        // display: inline-block;
        float: right;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .el-table__body-wrapper{
        overflow-x:hidden
    }
    .cell{
        .fa{
             font-size:16px;
             color: #409eef
        }
        .file-icon{
             font-size:18px;
             color: #315FAC
        }
    }
    .page-wrapper{
        // position: absolute;
        // right: 0;
        // bottom: 0;
        // width: 800px;
        // height: 35px;
        text-align: right;
        padding: 10px 0;
    }
}
</style>